<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<#include "/resource.ftl"/>
    <title>Athena消息系统</title>
</head>

<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a href="index.html"><b>Athena</b></a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
        <p class="login-box-msg">Sign in to start your session</p>

        <form id="init-users" method="post">
            <div class="form-group has-feedback">
                <input v-model="username" name="userName" type="text" class="form-control"
                       v-bind="{value:username}" placeholder="请输入您的用户名"/>
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input v-model="password" type="password" name="userPwd" class="form-control" v-bind="{value:password}"
                       placeholder="请输入密码">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>
                            <input type="checkbox" name="remember"> Remember Me
                        </label>
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
                </div>
                <!-- /.col -->
            </div>

            <div style="margin-top: 32px;" v-if="initializing">
                <h4 style="font-weight:bold;text-align: center;">正在登陆...</h4>
                <div class="spinner">
                    <div class="double-bounce1"></div>
                    <div class="double-bounce2"></div>
                </div>
            </div>
            <div v-if="error.length>0" class="alert alert-danger alert-dismissible" role="alert" style="margin-top: 16px;">
                <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                {{error}}
            </div>
        </form>
    </div>
    <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
    });
</script>

<script>
    var vm = new Vue({
        el: '#init-users',
        data: {
            username: '',
            password: '',
            error: "${error}",
            field: [1, 2],
            passShow: [],
            canSubmit: false,
            initializing: false
        },
        methods: {
            initialize: function (e) {
                this.canSubmit = true;
                this.initializing = true;
                $('#init-users').submit();
            },
            clear: function (e) {
                if (e == 'username') {
                    this.username = '';
                } else if (e == 'password') {
                    this.password = '';
                }
            }
            ,
            passToggle: function (key) {
                if (this.passShow.indexOf(key) == -1) {
                    this.passShow.push(key);
                } else {
                    this.passShow.remove(key);
                }
            },
            passStatus: function (key) {
                return this.passShow.indexOf(key) != -1;
            }
        },
        watch: {
            username: function (username) {
                counter(this.field, 1, username);
            },
            password: function (password) {
                counter(this.field, 2, password);
            }
        }
    });
</script>
</html>
